<template>
  <div class="audit">
    <a-card :bordered="false" style="border-radius:8px">
      <div class="flex row_bet">
        <div class="card_title">
          {{ rows.title }}
          <span style="color:#B5B8BD">| {{ rows.eventId }} {{ rows.saveTime }} 至 {{ rows.endTime }}</span>
        </div>
      </div>
      <div class="header_box">
        <a-input-search
          v-model="search"
          placeholder="标题关键词/商品ID/店铺名"
          enter-button="搜 索"
          size="large"
          allowClear
          :loading="searchloading"
          style="border-radius:8px;overflow:hidden"
          @search="onSearch"
        />
      </div>
    </a-card>
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="groupbox flex row_bet">
        <div class="card_title">
          商品列表
        </div>
      </div>
      <div v-if="goodsList.length > 0">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.itemId"
          :dataSource="goodsList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pictUrl" slot-scope="item">
            <div class="goodsinfo">
              <img :src="item.pictUrl" style="width:77px;height:77px;margin-right:15px;border-radius: 8px;"/>
              <div class="info-right">
                <div class="line-1">
                  <a :href="item.auctionUrl" target="_blank" rel="noopener noreferrer"> {{ item.title }}</a>
                </div>
                <div class="flex row_bet" style="margin:8px 0;">
                  <span>￥{{ item.zkFinalPrice }}</span>
                  <div>
                    <span class="p_r_10"> 券后价: ￥{{ item.couponZkFinalPrice }}</span>
                    <span> 销量: {{ item.biz30day }}</span>
                  </div>
                </div>
                <div>店铺: {{ item.shopTitle }}</div>
              </div>
            </div>
          </div>
          <div slot="auditStatus" slot-scope="item">
            <div :style="{ color: item.auditStatus == 1 ? '#101010' :item.auditStatus == 2 ? '#39C15B':'#FF2525' }">
              {{ item.auditStatus == 1 ? '待审核' : item.auditStatus == 2 ? '已审核':'已拒绝' }}
            </div>
          </div>
          <div slot="startTime" slot-scope="item">
            <div>起: {{ item.startTime }}</div>
            <div>止: {{ item.endTime }}</div>
          </div>
          <div slot="commissionRate" slot-scope="item">
            <div style="color:#2396F9;">{{ item.commissionRate }}%</div>
          </div>
          <div slot="serviceRate" slot-scope="item">
            <div style="color:#2396F9;">{{ item.serviceRate }}%</div>
          </div>
          <div slot="couponInfo" slot-scope="item">
            <div>{{ item.couponInfo === null?'无':item.couponInfo }}</div>
          </div>
          <div slot="active" slot-scope="item">
            <div v-if="item.auditStatus == 1">
              <a-button type="link" @click="dopass(item)" style="color:#2396F9;">通过</a-button>
              <a-button type="link" @click="dorefuse(item)" style="color:#292929;">拒绝</a-button>
              <a-button type="link" @click="getcommission(item.itemId)" style="color:#292929;">佣金</a-button>
            </div>
            <div v-if="item.auditStatus == 2">
              <a-button type="link" @click="docopy()" style="color:#39C15B;">推广</a-button>
            </div>
            <div v-if="item.auditStatus == 3">
              无
            </div>
            <!-- <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delArticle(item.id)">
            <span class="goodsurl quan">删</span>
          </a-popconfirm> -->
          </div>
        </a-table>
      </div>
      <div class="nogoods" v-else>
        <img :src="require('@/assets/imgs/nogoods.png')" alt="" srcset=""/>
        <div>搜索商品进行审核</div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import { doexaminegoods, getcommission, getexaminegoods } from '@/api/activityApi'

  export default {
    name: 'Audit',
    data () {
      return {
        columns: [
          {
            title: '商品信息',
            align: 'center',
            width: 400,
            // dataIndex: 'pictUrl',
            scopedSlots: {
              customRender: 'pictUrl'
            }
          },
          {
            title: '商品状态',
            width: 150,
            align: 'center',
            // dataIndex: 'auditStatus',
            scopedSlots: {
              customRender: 'auditStatus'
            }
          },
          {
            title: '排期时间',
            align: 'center',
            // dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '佣金比例',
            align: 'center',
            // dataIndex: 'commissionRate',
            scopedSlots: {
              customRender: 'commissionRate'
            }
          },
          {
            title: '服务费率',
            align: 'center',
            // dataIndex: 'serviceRate',
            scopedSlots: {
              customRender: 'serviceRate'
            }
          },
          {
            title: '优惠券',
            align: 'center',
            // dataIndex: 'couponInfo',
            scopedSlots: {
              customRender: 'couponInfo'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        goodsList: [
          // {
          //   auctionUrl: '//item.taobao.com/item.htm?id=604194047150',
          //   auditStatus: 2,
          //   auditorNick: '千里江陵37xl',
          //   biz30day: 14,
          //   commissionRate: 20,
          //   couponChannelName: '阿里妈妈推广',
          //   couponEffectiveEndTime: '2020-11-11',
          //   couponEffectiveStartTime: '2020-11-04',
          //   couponInfo: '满109.00减20.00',
          //   couponLeftCount: 10000,
          //   couponTotalCount: 10000,
          //   couponZkFinalPrice: 89,
          //   endTime: '11-11',
          //   eventJoinRecordId: 378685631,
          //   itemId: 604194047150,
          //   itemStatus: null,
          //   jddNum: null,
          //   jddPrice: null,
          //   jhsStock: null,
          //   pictUrl: '//img.alicdn.com/bao/uploaded/i2/2200788127457/O1CN0192fuBF24xM5thsnTL_!!0-item_pic.jpg',
          //   sellerId: 2200788127457,
          //   serviceRate: 5,
          //   shopTitle: 'coolgear旗舰店',
          //   startTime: '11-04',
          //   title: '美国coolgear弹盖保温杯学生ins简约小巧可爱便携水杯大容量杯子',
          //   tljInfo: null,
          //   userType: 0,
          //   wangwang: '500销量',
          //   zkFinalPrice: 109
          // }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          total: 15,
          page: 1
        },
        search: '',
        searchloading: false
      }
    },

    computed: {
      rows: function () {
        return this.$store.getters.rows
      }
    },
    created () {
      // console.log('rows', this.rows)
      this.getexaminegoods(1, 15, this.rows.eventId)
    },
    mounted () {
    },
    methods: {
      // 查询佣金
      getcommission (id) {
        getcommission({
          goods_id: id
        })
          .then(res => {
            if (res.code === 200) {
              // console.log('返回', res)
              this.$success({
                title: '提示',
                content: '该商品佣金为' + res.data.commission_rate + '%'
              })
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      getexaminegoods (page, pagesize, eventId, keyworld) {
        this.loading = true
        getexaminegoods({
          page: page,
          pagesize: pagesize,
          eventId: eventId,
          keyworld: keyworld
        })
          .then(res => {
            console.log(res)
            if (res.code === 200) {
              if (res.data.goods) {
                this.goodsList = res.data.goods
                this.searchloading = false
                const pagination = {
                  ...this.pagination
                }
                pagination.total = pagination.total + 15
                this.pagination = pagination
                this.loading = false
              }
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      docopy () {
        const that = this
        const str = 'http://ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + this.rows.eventId
        this.$copyText(str).then(
          function (e) {
            // console.log(e)
            that.$success({
              title: '链接复制成功',
              content: str
            })
          },
          function (e) {
            console.log(e)
          }
        )
      },
      // 审核商品
      doexaminegoods (itemid, status) {
        doexaminegoods({
          activity_id: this.rows.eventId,
          item_id: itemid,
          status: status // 审核状态 2=通过 3拒绝
        })
          .then(res => {
            if (res.code === 200) {
              this.$message.success('审核成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      dopass (item) {
        // console.log(item)
        const that = this
        this.$confirm({
          title: '提示',
          content: '是否确认通过商品？',
          onOk () {
            that.doexaminegoods(item.itemId, 2)
          },
          onCancel () {
          }
        })
      },
      dorefuse (item) {
        const that = this
        this.$confirm({
          title: '提示',
          content: '是否确认拒绝商品？',
          onOk () {
            that.doexaminegoods(item.itemId, 3)
          },
          onCancel () {
          }
        })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getexaminegoods(params.page, 15, this.rows.eventId, this.search)
      },
      onSearch (value) {
        console.log(value)
        if (value !== '') {
          this.searchloading = true
          this.getexaminegoods(1, 15, this.rows.eventId, value)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .audit {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .header_box::v-deep {
      max-width: 448px;
      margin: 33px auto 9px auto;

      .ant-input {
        border-radius: 8px 0 0 8px;
      }
    }

    .goodsinfo {
      display: flex;

      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }

    .nogoods {
      width: 300px;
      height: 200px;
      margin: 150px auto;
      text-align: center;
    }
  }
</style>
